<!-- <template>
	<view class="custom_header" style="height: {{navH}}px">
  
	  <view>左侧内容</view>
	  <view>办公</view>
	  <view>右侧内容</view>
	</view>
  </template>
  
  <script setup lang="ts">
  
  </script>
  
  <style>
  .custom_header {
	display: flex;
	justify-content: space-between;
	width: 100vw;
	line-height: 180rpx;
	font-weight: bold;
	position: fixed;
	left: 0;
	top: 0;
  }
  </style>
  -->

<template>
	<view class="Office">
		<!-- <u-sticky bgColor='#FFF'>
			<view class="s" style="font-weight: 700; font-size: 35rpx;">
				<LeftSearch :list='list' :router='router' />
			</view>
		</u-sticky> -->
		<view class="Officebox">
			<view class="OfficeboxBig">
				<view class="manage" v-for="item in List" :key="item.id" @click="To(item)">
					<view class="bor">
						<view class="imgbox">
							<image :src="item.img" mode="" class="img"></image>
						</view>
						<view class="manageFont">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Day_Top_bottom">
			<view class="taskbox">
				<view class="tesk">
					<view class="OfficeTitle">
						<view class="">
							我的任务
						</view>
						<u-icon name="arrow-right" color='#cccccc;'></u-icon>
					</view>
					<view class="teskList">
						<view class="weekList">
							<view class="weekDayLeft">
								<view class="time">
									2019-09-23 22:31
								</view>
								<view class="size">
									与客户沟通报价事宜
								</view>
							</view>
							<view class="weekDayright">
								<!-- <u-icon :name="items.icon" class="icon"></u-icon> -->
								<text>进行中</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="taskbox">
				<view class="tesk">
					<view class="OfficeTitle">
						<view class="">
							我的日程
						</view>
						<u-icon name="arrow-right" color='#cccccc;'></u-icon>
					</view>
					<view class="teskList">
						<view class="weekList">
							<view class="weekDayLeft">
								<view class="time">
									2019-09-23 22:31
								</view>
								<view class="size">
									与客户沟通报价事宜
								</view>
							</view>
							<view class="weekDayright">
								<!-- <u-icon :name="items.icon" class="icon"></u-icon> -->
								<text>进行中</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="taskbox">
				<view class="tesk">
					<view class="OfficeTitle">
						<view class="">
							待我审批
						</view>
						<u-icon name="arrow-right" color='#cccccc;'></u-icon>
					</view>
					<view class="teskList">
						<view class="weekList">
							<view class="weekDayLeft">
								<view class="time">
									2019-09-23 22:31
								</view>
								<view class="size">
									与客户沟通报价事宜
								</view>
							</view>
							<view class="weekDayright">
								<!-- <u-icon :name="items.icon" class="icon"></u-icon> -->
								<text>进行中</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	// import LeftSearch from '../../components/LeftSearch/LeftSearch.vue'
	import {
		ref
	} from 'vue'
	// import {
	// 	useAlertsStore
	// } from '../../store/index.js'
	// let store = useAlertsStore()
	let router = ref('')
	let pages = getCurrentPages()
	let route = pages[pages.length - 1].route
	router.value = route
	let list = ref([{
		title: "办公"
	}])
	let List = ref([{
			id: 1,
			title: "审批管理",
			img: '../../static/办公/a审批管理2.png'
		},
		{
			id: 2,
			title: "办公申请",
			img: '../../static/办公/a办公申请.png'
		}, {
			id: 3,
			title: '工单管理',
			img: '../../static/办公/工单管理.png'
		},
		{
			id: 4,
			title: '任务管理',
			img: '../../static/办公/任务管理-01.png'
		},
		{
			id: 5,
			title: "日程管理",
			img: '../../static/办公/日程管理-01.png'
		},
		{
			id: 6,
			title: '工作报告',
			img: "../../static/办公/工作报告.png"
		},
		{
			id: 7,
			title: '系统公告',
			img: '../../static/办公/系统公告.png'
		},
		{
			id: 8,
			title: "外勤签到",
			img: "../../static/办公/外勤签到.png"
		},
		{
			id: 9,
			title: "我的考勤",
			img: "../../static/办公/我的考勤.png"
		},
		{
			id: 10,
			title: "文档管理",
			img: "../../static/办公/政策明白纸.png"
		},
		{
			id: 11,
			title: "通讯录",
			img: '../../static/办公/通讯录.png'
		}
	])

	const To = (item) => {
		if (item.title == '审批管理') {
			console.log(111);
			uni.navigateTo({
				url: '/pages/Office/Approval/Approval'
			})
		} else if (item.title == '工单管理') {
			uni.navigateTo({
				url: '/pages/Office/Tickets/Tickets'
			})
		}
	}
</script>

<style scoped lang="scss">
	.Office {
		width: 100vw;
		height: 100vh;

		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.s {
			padding-left: 35rpx;
			padding-right: 35rpx;
		}

		.Officebox {

			padding-left: 35rpx;
			padding-right: 35rpx;
			margin-top: 20rpx;

			.manage {
				width: 25%;
				height: 170rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 25rpx;

				.bor {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
				}

				.imgbox {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					background-color: #e4e4e4;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}

				.manageFont {
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}

		.OfficeboxBig {

			display: flex;
			background-color: #FFF;
			padding-top: 35rpx;
			padding-bottom: 35rpx;
			flex-wrap: wrap;
			border-radius: 20rpx;
			box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.047058823529411764);
		}

		.img {
			width: 60rpx;
			height: 60rpx;
		}


		.Day_Top_bottom {
			padding-left: 35rpx;
			padding-right: 35rpx;
			padding-bottom: 50rpx;



			.taskbox {
				margin-top: 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				background-color: #FFF;
				border-radius: 20rpx;
				box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.047058823529411764);

				.OfficeTitle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 20rpx;
					box-sizing: border-box;
					height: 110rpx;
				}
			}

			.weekList {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 110rpx;
				background-color: #fcfcfc;
				margin-top: 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;

				.time {
					font-size: 30rpx;
					color: #9999a6;
				}

				.size {
					font-size: 25rpx;
				}
			}

			.weekDayright {
				display: flex;
				font-size: 25rpx;
				color: #999999;

				.icon {
					margin-right: 5rpx;
				}
			}
		}
	}
</style>